.area-top-banner{background: #394fa2 url(../images/area-top-banner3.jpg)  no-repeat center center / cover; min-height: 650px; color: #fff; padding: 50px 0; overflow: hidden;}
.area-top-banner .breadcrumb{background: none; color: #fff; margin-bottom: 30px;}
.area-top-banner .breadcrumb a{color: #fff;}
.area-top-banner .breadcrumb span{margin: 0 5px;}
.area-top-banner .breadcrumb a:hover{color: #ef4646;}
.area-top-label{padding: 10px 0px;}
.area-top-label .area-label-til{ font-size: 60px;line-height: 60px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #2d95ff; background-image:-webkit-linear-gradient(top,#41ffef,#2d95ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.area-top-banner2 .area-top-label .area-label-til{ color: #ee434a; background-image:-webkit-linear-gradient(top,#db846c,#ee434a);}
.area-top-banner3 .area-top-label .area-label-til{ color: #23fdc8; background-image:-webkit-linear-gradient(top,#4bf9ab,#08fedf);}
.area-top-banner4 .area-top-label .area-label-til{ color: #59e3e2; background-image:-webkit-linear-gradient(top,#5ff8c1,#55d6f5);}
.area-top-label .area-label-tex{font-size: 38px; line-height: 46px;}
.area-top-label .area-label-tex span{ font-weight: bold; color: #ff705c;}
.area-top-materials{ text-align: center; margin-bottom: 30px;}
.area-top-materials p{ position: relative; font-size: 32px; font-weight: bold; line-height: 44px; padding: 10px 0; color: #0e003c; background: #93acff; display: inline-block;}
.area-top-materials p span{ margin-left: 15px; vertical-align: top;}
.area-top-materials p span:first-child{ margin-left: 0px;}
.area-top-materials p::before,.area-top-materials p::after{ content: " "; position: absolute; top: 0; height: 100%; width: 150px;}
.area-top-materials p::before{right: 100%; background: rgba(147,172,255,1);
    background: -moz-linear-gradient(left,  rgba(147,172,255,0) 0%, rgba(147,172,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,172,255,0)), color-stop(100%,rgba(147,172,255,1)));
    background: -webkit-linear-gradient(left,  rgba(147,172,255,0) 0%,rgba(147,172,255,1) 100%);
    background: -o-linear-gradient(left,  rgba(147,172,255,0) 0%,rgba(147,172,255,1) 100%);
    background: -ms-linear-gradient(left,  rgba(147,172,255,0) 0%,rgba(147,172,255,1) 100%);
    background: linear-gradient(to right,  rgba(147,172,255,0) 0%,rgba(147,172,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(147,172,255,0)', endColorstr='rgba(147,172,255,1)',GradientType=1 );}
.area-top-materials p::after{ left: 100%; background: rgba(147,172,255,1);
    background: -moz-linear-gradient(left,  rgba(147,172,255,1) 0%, rgba(147,172,255,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,172,255,1)), color-stop(100%,rgba(147,172,255,0)));
    background: -webkit-linear-gradient(left,  rgba(147,172,255,1) 0%,rgba(147,172,255,0) 100%);
    background: -o-linear-gradient(left,  rgba(147,172,255,1) 0%,rgba(147,172,255,0) 100%);
    background: -ms-linear-gradient(left,  rgba(147,172,255,1) 0%,rgba(147,172,255,0) 100%);
    background: linear-gradient(to right,  rgba(147,172,255,1) 0%,rgba(147,172,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(147,172,255,1)', endColorstr='rgba(147,172,255,0)',GradientType=1 );}
.area-top-banner2 .area-top-materials p{ background: #ff6161;}
.area-top-banner2 .area-top-materials p::before{ background: rgba(255,97,97,1);
    background: -moz-linear-gradient(left,  rgba(255,97,97,0) 0%, rgba(255,97,97,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,97,97,0)), color-stop(100%,rgba(255,97,97,1)));
    background: -webkit-linear-gradient(left,  rgba(255,97,97,0) 0%,rgba(255,97,97,1) 100%);
    background: -o-linear-gradient(left,  rgba(255,97,97,0) 0%,rgba(255,97,97,1) 100%);
    background: -ms-linear-gradient(left,  rgba(255,97,97,0) 0%,rgba(255,97,97,1) 100%);
    background: linear-gradient(to right,  rgba(255,97,97,0) 0%,rgba(255,97,97,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,97,97,0)', endColorstr='rgba(255,97,97,1)',GradientType=1 );}
.area-top-banner2 .area-top-materials p::after{ background: rgba(255,97,97,1);
    background: -moz-linear-gradient(left,  rgba(255,97,97,1) 0%, rgba(255,97,97,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,97,97,1)), color-stop(100%,rgba(255,97,97,0)));
    background: -webkit-linear-gradient(left,  rgba(255,97,97,1) 0%,rgba(255,97,97,0) 100%);
    background: -o-linear-gradient(left,  rgba(255,97,97,1) 0%,rgba(255,97,97,0) 100%);
    background: -ms-linear-gradient(left,  rgba(255,97,97,1) 0%,rgba(255,97,97,0) 100%);
    background: linear-gradient(to right,  rgba(255,97,97,1) 0%,rgba(255,97,97,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,97,97,1)', endColorstr='rgba(255,97,97,0)',GradientType=1 );}
.area-top-banner3 .area-top-materials p{ background: #07fef4;}
.area-top-banner3 .area-top-materials p::before{ background: rgba(7,254,244,1);
    background: -moz-linear-gradient(left,  rgba(7,254,244,0) 0%, rgba(7,254,244,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(7,254,244,0)), color-stop(100%,rgba(7,254,244,1)));
    background: -webkit-linear-gradient(left,  rgba(7,254,244,0) 0%,rgba(7,254,244,1) 100%);
    background: -o-linear-gradient(left,  rgba(7,254,244,0) 0%,rgba(7,254,244,1) 100%);
    background: -ms-linear-gradient(left,  rgba(7,254,244,0) 0%,rgba(7,254,244,1) 100%);
    background: linear-gradient(to right,  rgba(7,254,244,0) 0%,rgba(7,254,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(7,254,244,0)', endColorstr='rgba(7,254,244,1)',GradientType=1 );}
.area-top-banner3 .area-top-materials p::after{ background: rgba(7,254,244,1);
    background: -moz-linear-gradient(left,  rgba(7,254,244,1) 0%, rgba(7,254,244,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(7,254,244,1)), color-stop(100%,rgba(7,254,244,0)));
    background: -webkit-linear-gradient(left,  rgba(7,254,244,1) 0%,rgba(7,254,244,0) 100%);
    background: -o-linear-gradient(left,  rgba(7,254,244,1) 0%,rgba(7,254,244,0) 100%);
    background: -ms-linear-gradient(left,  rgba(7,254,244,1) 0%,rgba(7,254,244,0) 100%);
    background: linear-gradient(to right,  rgba(7,254,244,1) 0%,rgba(7,254,244,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(7,254,244,1)', endColorstr='rgba(7,254,244,0)',GradientType=1 );}
.area-top-banner4 .area-top-materials p{ background: #61ffb6;}
.area-top-banner4 .area-top-materials p::before{ background: rgba(97,255,182,1);
    background: -moz-linear-gradient(left,  rgba(97,255,182,0) 0%, rgba(97,255,182,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(97,255,182,0)), color-stop(100%,rgba(97,255,182,1)));
    background: -webkit-linear-gradient(left,  rgba(97,255,182,0) 0%,rgba(97,255,182,1) 100%);
    background: -o-linear-gradient(left,  rgba(97,255,182,0) 0%,rgba(97,255,182,1) 100%);
    background: -ms-linear-gradient(left,  rgba(97,255,182,0) 0%,rgba(97,255,182,1) 100%);
    background: linear-gradient(to right,  rgba(97,255,182,0) 0%,rgba(97,255,182,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(97,255,182,0)', endColorstr='rgba(97,255,182,1)',GradientType=1 );}
.area-top-banner4 .area-top-materials p::after{ background: rgba(97,255,182,1);
    background: -moz-linear-gradient(left,  rgba(97,255,182,1) 0%, rgba(97,255,182,0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(97,255,182,1)), color-stop(100%,rgba(97,255,182,0)));
    background: -webkit-linear-gradient(left,  rgba(97,255,182,1) 0%,rgba(97,255,182,0) 100%);
    background: -o-linear-gradient(left,  rgba(97,255,182,1) 0%,rgba(97,255,182,0) 100%);
    background: -ms-linear-gradient(left,  rgba(97,255,182,1) 0%,rgba(97,255,182,0) 100%);
    background: linear-gradient(to right,  rgba(97,255,182,1) 0%,rgba(97,255,182,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(97,255,182,1)', endColorstr='rgba(97,255,182,0)',GradientType=1 );}
.area-top-materials p span:first-child{ margin-left: 0px;}
.area-top-text-desc{ font-size: 25px; line-height: 46px; margin-bottom: 15px; color: #fff;}
.area-top-text-btn a{display: block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; color: #fff; margin: 0 auto; border-radius: 23px;
    background: #f45c43;
    background: -moz-linear-gradient(left,  #f45c43 0%, #eb3349 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349));
    background: -webkit-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -o-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -ms-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: linear-gradient(to right,  #f45c43 0%,#eb3349 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );}
.area-defa-btn{display: inline-block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; color: #fff; margin: 0 auto; border-radius: 23px;
    background: #f45c43;
    background: -moz-linear-gradient(left,  #f45c43 0%, #eb3349 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349));
    background: -webkit-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -o-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -ms-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: linear-gradient(to right,  #f45c43 0%,#eb3349 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );}
.area-defa-btn:hover{color: #fff;}
.area-defa-img{ position: relative; vertical-align: top; cursor: pointer;}
.area-defa-img span{ position: absolute; bottom: 100%; left: 0; right: 0; width: 150px; height: 0; overflow: hidden; transition: all .5s;}
.area-defa-img span img{ margin: 0 auto;}
.area-defa-img:hover span{ height:106px ;}
.hover-slide{ position: relative; overflow: hidden;}
.hover-slide::before{ position: absolute; content: " "; top: 0; right: 100%; width: 300%; height: 100%; border-radius: 23px ; background: rgba(255,255,255,.3); transition: all .5s;}
.hover-slide:hover::before{  right: -300%;}


.area-container{background: #fff;}

.area-program{ padding-bottom: 30px;}
.area-head{ padding: 70px 0 30px; text-align: center;}
.area-til{font-size: 40px; line-height: 56px; color: #333333; margin-bottom: 30px;}
.area-text{ font-size: 16px; line-height: 30px; color: #333333;}
.area-program-list{ position: relative; margin-bottom: 30px;}
.area-program-list-bg{ position: relative;}
.area-program-list-bg img{ width: 100%;}
.area-program-list-bg::after{ position: absolute; content: " "; width: 100%; height: 100%; top: 0; left: 0; background: #000652 ; opacity: 0.5; transition: all .5s;}
.area-program-list-desc{position: absolute; width: 100%; height: 100%; top: 70px; left: 0; color: #fff;}
.area-program-list-til{ padding-top: 40px; font-size: 28px; font-weight: bold; line-height: 48px;}
.area-program-list-text{ padding: 10px; font-size: 16px; line-height: 32px; margin-bottom: 10px;}
.area-program-list-btn a{display: inline-block; width: 150px; height: 46px; font-size: 16px; line-height: 46px; color: #fff; margin: 0 auto; border-radius: 23px;
    background: #f45c43;
    background: -moz-linear-gradient(left,  #f45c43 0%, #eb3349 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349));
    background: -webkit-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -o-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -ms-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: linear-gradient(to right,  #f45c43 0%,#eb3349 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );}
.area-program-list .area-program-list-btn{ display: none;}
.area-program-list:hover .area-program-list-btn{ display: block;}
.area-program-list:hover .area-program-list-bg::after{ opacity: 0.5;}


.area-program-material li{ display: inline-block; margin: 10px;}
.area-program-material li a{ position: relative; display: block; background: #eeeeee; border-radius: 15px; overflow: hidden;}
.area-program-material li a span{ position: relative; display: inline-block; vertical-align: top; padding: 0 15px; line-height: 36px; transition: all .3s; color: #000;}
.area-program-material li a::before{ position: absolute; content: " "; display: block; width: 100%; height: 100%; opacity: 0;transition: all .3s; background: #f45c43;
    background: -moz-linear-gradient(left,  #f45c43 0%, #eb3349 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349));
    background: -webkit-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -o-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -ms-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: linear-gradient(to right,  #f45c43 0%,#eb3349 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );}
.area-program-material li a:hover span{ color: #fff;}
.area-program-material li a:hover::before{ opacity: 1;}

.area-approve{ margin-top: 50px; margin-bottom: 50px; height: 321px; background: #5860d0;
    background: -moz-linear-gradient(top,  #5860d0 0%, #3e3687 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5860d0), color-stop(100%,#3e3687));
    background: -webkit-linear-gradient(top,  #5860d0 0%,#3e3687 100%);
    background: -o-linear-gradient(top,  #5860d0 0%,#3e3687 100%);
    background: -ms-linear-gradient(top,  #5860d0 0%,#3e3687 100%);
    background: linear-gradient(to bottom,  #5860d0 0%,#3e3687 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5860d0', endColorstr='#3e3687',GradientType=0 );}
.area-approve-lf{ width: 55%; float: left; height: 321px; position: relative; background: url(../images/areanew/area-approvebg.png)  no-repeat right bottom / cover;}
.area-approve-lf .area-approve-lf-img{ position: absolute; padding-right: 60px; right: 0; bottom: 0; max-width: 100%;}
.area-approve-lf .area-approve-lf-img img{ max-width: 100%;}
.area-approve-rt{ width: 45%; float: left; padding-top: 50px; color: #fff;}
.area-approve-rt-main{ margin-left: -50px;}
.area-approve-til h3{ font-size: 40px; font-weight: bold; float: left; line-height: 46px; margin-right: 60px;}
.area-approve-btn{display: inline-block; width: 150px; height: 46px; text-align: center; font-size: 16px; line-height: 46px; color: #fff; margin: 0 auto; border-radius: 23px;
    background: #f45c43;
    background: -moz-linear-gradient(left,  #f45c43 0%, #eb3349 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349));
    background: -webkit-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -o-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -ms-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: linear-gradient(to right,  #f45c43 0%,#eb3349 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );}
.area-approve-sign{ padding-top: 30px; padding-left: 40px;}
.area-approve-sign p {display: inline-block; margin: 0 5px 10px; font-size: 12px;}
.area-approve-sign p i{display: block; width: 50px; height: 50px; margin: 0 auto; background: url(../images/area-strength.png) no-repeat;}
.area-approve-sign p i.ico01{width: 62px; background-position: 0px 0;}
.area-approve-sign p i.ico02{width: 55px; background-position: -65px 0;}
.area-approve-sign p i.ico03{width: 50px; background-position: -128px 0;}
.area-approve-sign p i.ico04{width: 50px; background-position: -182px 0;}
.area-approve-sign p i.ico05{width: 46px; background-position: -237px 0;}
.area-approve-sign p i.ico06{width: 42px; background-position: -288px 0;}
.area-approve-text{ padding-left: 50px;}
.area-approve-text p{ padding: 10px 20px; font-size: 18px; display: inline-block; vertical-align: top;}

.area-prot{ padding-bottom: 50px;}
.area-prot-hot .line-big>div{ margin-bottom: 30px;}
.area-prot-hot>div:nth-child(2n) .area-prot-main{ float: right;}
.area-prot-main{ background: #dee5f1; overflow: hidden; display: flex;}
.area-prot-img{ padding: 0; width: 47%; position: relative;}
.area-prot-img img{ width: 100%;}
.area-prot-img a{position: absolute; bottom: 20px; left: 50%; display: none; width: 150px; height: 46px; text-align: center; font-size: 16px; line-height: 46px; color: #fff; margin-left: -75px; border-radius: 23px;
    background: #f45c43;
    background: -moz-linear-gradient(left,  #f45c43 0%, #eb3349 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349));
    background: -webkit-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -o-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -ms-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: linear-gradient(to right,  #f45c43 0%,#eb3349 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );}
.area-prot-img:hover a{ display: block;}
.area-prot-desc{ padding: 20px 15px 20px 30px; width: 53%;}
.area-prot-til{ font-size: 24px; font-weight: bold; line-height: 36px; padding: 20px 0 20px 0px;}
.area-prot-btn a{display: inline-block;  height: 36px; line-height: 36px; min-width: 110px; text-align: center; color: #555555; border: 1px solid #555555; position: relative; margin-right: 13px; margin-bottom: 15px; padding: 0 6px; border-radius: 5px;}
.area-prot-btn a span{ position: relative; transition: all .3s;}
.area-prot-btn a::before{ position: absolute; content: " "; display: block; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 5px; opacity: 0;transition: all .3s; background: #f45c43;
    background: -moz-linear-gradient(left,  #f45c43 0%, #eb3349 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349));
    background: -webkit-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -o-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -ms-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: linear-gradient(to right,  #f45c43 0%,#eb3349 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );}
.area-prot-btn a:hover span{ color: #fff;}
.area-prot-btn a:hover::before{ opacity: 1;}
.area-prot-hot-btn{ text-align: center;}
.area-prot-hot-btn a{ margin: 0 15px;}


.area-service{background: #fff url(../img/areanew/area-service-bg.jpg)  no-repeat center center / cover; min-height: 600px; color: #fff; padding: 50px 0 100px;}
.area-service-top-til{ font-size: 40px; line-height: 60px; text-align: center; padding: 30px 0 30px;}
.area-service-label{ padding: 20px 0 60px;}
.area-service-label li{ padding-top: 50px;}
.area-service-label-til { line-height: 50px;}
.area-service-label-til b{ font-size: 100px; font-family: Arial, Helvetica, sans-serif; background-image:-webkit-linear-gradient(right,#eb3349,#f45c43); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.area-service-label-til span{ font-size: 24px;}
.area-service-label-tex{ font-size: 24px}
.area-service-btn{ text-align: center;}
.area-service-btn a{ margin: 0 15px;}
.area-service-list{ padding-bottom: 35px;}
.area-service-list-main{ margin-bottom: 30px;}
.area-service-list-desc{ text-align: center;}
.area-service-list-desc::after{ clear: both; content: " "; width: 100%; height: 0; display: block;}
.area-service-list-bg{ background: #5abad5;}
.area-service-list-bg2{ background: #5a97d5;}
.area-service-list-img{ width: 83%; float: right;}
.area-container-g .area-service-list-img{ width: 77%;}
.area-service-list-num{ font-size: 44px; line-height: 48px; padding: 15px 0 5px; display: inline-block; letter-spacing: 10px; font-style: italic; font-weight: bold; opacity: 0.3;}
.area-service-list-tex{ font-size: 16px; line-height: 24px; padding: 0 7px; writing-mode:vertical-rl; writing-mode: tb-rl;}
.area-service-list-nums{ font-size: 44px; line-height: 48px; padding: 20px 0; display: inline-block; letter-spacing: 10px; font-style: italic; font-weight: bold; opacity: 0.3;}
.area-service-list-text{ font-size: 16px; line-height: 24px; padding: 0 7px; display: inline-block;}

.area-case{ padding: 30px 0;}
.area-case-top-til{ font-size: 40px; line-height: 60px; text-align: center; padding: 60px 0 30px;}
.area-case-main{ position: relative; display: block; margin-bottom: 30px;}
.area-case-list-img img{ width: 100%;}
.area-case-list-text{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 10px 5px; color: #fff; font-size: 16px; line-height: 36px; text-align: center; background: rgba(0, 0, 0, 0.5);
    background: -moz-linear-gradient(top,  rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0)), color-stop(100%,rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top,  rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%);
    background: -o-linear-gradient(top,  rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%);
    background: -ms-linear-gradient(top,  rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%);
    background: linear-gradient(to bottom,  rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0)', endColorstr='rgba(0, 0, 0, 0.7)',GradientType=0 );}
.area-case-list-edsc{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; padding: 45px 30px 0;}
.area-case-list-til{ font-size: 18px; font-weight: bold; margin-bottom: 15px;}
.area-case-list-tex{ font-size: 16px;}
.area-caseimg-btn{ text-align: center;}




.area-ind-cont{ background-color: #eee; background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 80px 0px; color: #333333;}
.area-ind-cont-til{ text-align: center; font-size: 32px; line-height: 40px;  margin-bottom: 20px;}
.area-ind-cont-tex{ text-align: center; font-size: 18px; line-height: 36px; margin-bottom: 30px; color: #555555;}
.area-ind-cont-input{ padding: 0 20px; margin-bottom: 30px;}
.area-ind-cont-input input{ font-size: 18px; line-height: 36px; height: 46px; border-color: #555555;  color: #555555; background: none; padding: 5px 15px;}
.area-ind-cont-input input:focus{ border-color: #ed2936;}
.area-ind-cont-btn{ text-align: center;}
.area-ind-cont-btn a{display: inline-block; width: 150px; height: 46px; overflow: hidden; margin: 0 20px 20px;}
.area-ind-cont-submit{display: inline-block; width: 150px; height: 46px; line-height: 46px; color: #ef4646; margin: 0 20px 20px; border-radius: 23px; background: #fff;}
.area-ind-cont-submit span{ position: relative; transition: all .3s;}
.area-ind-cont-submit::before{ position: absolute; content: " "; display: block; width: 150px; height: 46px; border-radius: 24px; opacity: 0;transition: all .3s; background: #f45c43;
    background: -moz-linear-gradient(left,  #f45c43 0%, #eb3349 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f45c43), color-stop(100%,#eb3349));
    background: -webkit-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -o-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: -ms-linear-gradient(left,  #f45c43 0%,#eb3349 100%);
    background: linear-gradient(to right,  #f45c43 0%,#eb3349 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f45c43', endColorstr='#eb3349',GradientType=1 );}
.area-ind-cont-submit:hover span{ color: #fff;}
.area-ind-cont-submit:hover::before{ opacity: 1;}


@media (max-width: 999px) { 
    .area-top-banner{ min-height: 200px;}
    .area-top-banner .breadcrumb{ margin-bottom: 15px;}
    .area-top-label{ padding: 10px 10px 20px;}
    .area-top-label .area-label-tex{ font-size: 32px;}
    .area-top-text-desc{ font-size: 26px; line-height: 32px;}
    .area-til{ font-size: 32px;}
    .area-case-top-til{ font-size: 32px; padding: 30px 0;}
    .area-top-label .area-label-til{ font-size: 58px;}
    .area-prot-main{ flex-wrap: wrap;}
    .area-prot-img { width: 100%; }
    .area-prot-desc { width: 100%; } 
    .area-approve{ margin-top: 0; }
    .area-prot-hot-btn a,.area-service-btn a{ margin: 0 10px;}
    .area-ind-cont-btn a{ margin: 0 10px 20px;}
    .area-service-list-img{ width: 80%;}
    .area-prot-desc{ padding: 5px 0 20px 15px;}
    .area-prot-til{ padding-right: 15px; text-align: center;}
    .area-prot-btn{ text-align: center;}
    
    .area-service-list-imgs{ float: left;}
    .area-container-g .area-service-list-num{ padding-top: 10%; padding-bottom: 5%;}
    .area-container-g .area-service-list-tex{ padding: 0 4%;}
    .area-container-g .area-service-list-img img{ width: 100%;}
    .area-service-list-nums{ padding-top: 50px; font-size: 66px;}
    .area-service-list-text{ display: block; font-size: 24px; line-height: 48px;}
    
    .area-prot-hot .line-big{ display: flex; flex-wrap: wrap;}
    .area-prot-hot .line-big dl{ width: 100%; height: 100%;}
    .area-prot-main{ flex-direction:column;}
}

@media (max-width: 559px) { 
    .area-top-label .area-label-til{ font-size: 38px; line-height: 46px; margin-bottom: 0;}
    .area-top-label .area-label-tex{ display: none;}
    .area-program-list-til{ font-size: 24px;}
    .area-approve{ height: auto; overflow: hidden;}
    .area-approve-lf{ width: 100%; height: auto; padding: 10px; background: url(../img/areanew/area-approvebg.jpg)  no-repeat center bottom / cover;}
    .area-approve-rt{ width: 100%; padding-top: 20px;}
    .area-approve-rt-main{ margin-left: 0px; padding: 20px;} 
    .area-approve-lf .area-approve-lf-img{ position: relative; padding-right: 0;}
    .area-approve-til h3{ float: none; margin-bottom: 30px; font-size: 36px; margin-right: 0; text-align: center;}
    .area-program-list-btn{ text-align: center;}
    .area-approve-sign{ padding-left: 0; text-align: center;}
    .area-approve-text{ padding-left: 0; text-align: center;}
    .area-service-label li{ padding-top: 20px;}
    .area-service-label-til b{ font-size: 68px;}
    .area-service-label-til span{ font-size: 18px;}
    .area-service-label-tex{ font-size: 18px;}
    .area-prot-btn a{ min-width: 0;}
    .area-service-list-imgs{ float: left; width: 50%;}
    .area-service-list-nums{ padding-top: 10%; padding-bottom: 10px; font-size: 44px;}
    .area-service-list-text{ display: block; font-size: 16px; line-height: 24px;}
}
@media (max-width: 450px) { .line-big .xsm1, .line-big .xsm10, .line-big .xsm11, .line-big .xsm12, .line-big .xsm2, .line-big .xsm3, .line-big .xsm4, .line-big .xsm5, .line-big .xsm6, .line-big .xsm7, .line-big .xsm8, .line-big .xsm9 { min-height: 1px; padding-right: 15px; padding-left: 15px; }
  .show-sm { display: block; }
  .xsm1, .xsm10, .xsm11, .xsm12, .xsm2, .xsm3, .xsm4, .xsm5, .xsm6, .xsm7, .xsm8, .xsm9 { float: left; }
  .xsm12 { width: 100%; }
  .xsm11 { width: 91.66666667%; }
  .xsm10 { width: 83.33333333%; }
  .xsm9 { width: 75%; }
  .xsm8 { width: 66.66666667%; }
  .xsm7 { width: 58.33333333%; }
  .xsm6 { width: 50%; }
  .xsm5 { width: 41.66666667%; }
  .xsm4 { width: 33.33333333%; }
  .xsm3 { width: 25%; }
  .xsm2 { width: 16.66666667%; }
  .xsm1 { width: 8.33333333%; }
  .area-prot-hot-btn a,.area-service-btn a{ margin: 0 5px;}
  .area-ind-cont-btn a{ margin: 0 5px 20px; width: 140px;}
  .area-defa-btn{ width: 140px;}
  .area-service-list-imgs{ float: left; width: 45%;}
  .area-service-list-nums{ padding-top: 6%;}
}
@media(min-width: 451px) and (max-width:660px){
    .area-program-list-til{ padding: 10% 20px 0; margin-bottom: 10%;}
    .area-program-list-text{ display: none;}
    .area-program-list .area-program-list-btn{ display: block;}
}
@media(min-width: 560px) and (max-width:759px) { 
    .area-approve-lf{ width: 50%;}
    .area-approve-rt{ width: 50%; padding-top: 20px;}
    .area-approve-til h3{ font-size: 28px;margin-right:30px}
    .area-approve-rt-main{ margin-left: -100px;}
    .area-approve-sign{ padding-top: 5px; padding-left: 30px; text-align: center;}
    .area-approve-sign p{ margin-left: 15px; margin-right: 15px;}
    .area-approve-text { text-align: center;}
    .area-approve-text p{ padding: 5px;}
}
@media(min-width: 760px) and (max-width:999px) { 
    .area-approve-rt{ padding-top: 20px;}
    .area-approve-til h3{ font-size: 32px;margin-right:40px}
    .area-approve-rt-main{ margin-left: -80px;}
    .area-approve-sign{ padding-top: 5px; padding-left: 10px; text-align: center;}
    .area-approve-sign p{ margin-left: 15px; margin-right: 15px;}
    .area-approve-text { text-align: center;}
    .area-approve-text p{ padding: 5px;}
}

@media (max-width:599px){ 
    .area-service-list-desc{ padding-bottom: 10px;}
    .area-service-list-img{ width: 100%; float: none; margin-bottom: 10px;}
    .area-container-g .area-service-list-img{ width: 100%;}
    .area-service-list-num{ padding-top: 0px; line-height: 44px;}
    .area-service-list-tex{ padding: 0 5px; display: inline-block;writing-mode:initial;writing-mode:initial; margin-right: 10px;}
    .area-container-g .area-service-list-tex{  padding: 0 2px;}
    .area-container-g .area-service-list-desc{ padding-bottom: 0;}
}

@media(min-width: 600px) and (max-width:700px){ 
    .area-service-list-img{ width: 79%;}
    .area-service-list-num{ padding-top: 0px; line-height: 44px;}
    .area-service-list-tex{ padding: 0 5px;}
    .area-container-g .area-service-list-tex{  padding: 0 2%;}
    .area-container-g .area-service-list-nums{ padding: 50px 0 20px;}
}
@media(min-width: 650px) and (max-width:700px){ 
    .area-container-g .area-service-list-tex{  padding: 0 3%;}
}

@media(min-width: 1000px) and (max-width:1199px){ 
    .area-prot-desc{padding: 1px 5px 1px 10px;}
    .area-prot-btn a{ margin-right: 7px;}
    .area-approve-rt-main{ margin-left: -80px;}
    .area-approve-sign{ padding-left: 10px; text-align: center;}
    .area-approve-sign p{ margin-right: 0;}
    .area-approve-text { text-align: center;}
    .area-approve-text p{ padding: 10px;}
    .area-service-list-img{ width: 80%;}
    .area-service-list-num{ padding-top: 5px;}
    .area-service-list-tex{ padding: 0 5px;}
    .area-container-g .area-service-list-tex{  padding: 0 2px;}
    .area-container-g .area-service-list-nums{ padding: 16px 0;}
}